import React, { useState, useEffect } from 'react';
import { Modal, Button, Form, message, Input, Tree } from 'antd';
import { addGoods } from '../apis/goods/goods';
const layout = {
  labelCol: {
    span: 4,
  },
  wrapperCol: {
    span: 20,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};
export default function AddGoodsType(prpos) {
  const [isModalVisible, setIsModalVisible] = useState();
  //添加状态
  const [status, setStatus] = useState(1);
  //上级商品类型 ID
  const [goodId, setGoodId] = useState();
  //商品名称
  const [goodname, setGoodname] = useState();
  const handleOk = () => {};

  const handleCancel = () => {
    prpos.cancel();
  };
  //获取保存上级商品类型 ID
  const onCheck = (values) => {
    setGoodId(values[0]);
  };
  //获取保存商品名称并发送网络请求
  const onFinish = async (values) => {
    console.log(values);
    const res = await addGoods({ ...values, pid: goodId, status });
    if (res.status == 200) {
      message.success('添加成功');
    } else {
      message.error('添加失败');
    }
  };
  return (
    <>
      <Modal
        title="新增商品类型"
        visible={prpos.isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Form {...layout} name="control-hooks" onFinish={onFinish}>
          <Form.Item
            name="name"
            label="商品名称"
            rules={[
              {
                required: true,
                message: '请输入正确的商品名称',
              },
            ]}
          >
            <Input placeholder="请输入商品名称" />
          </Form.Item>
          <p>上级商品类型：</p>
          <Tree
            style={{ marginLeft: '100px' }}
            checkable
            onCheck={onCheck}
            treeData={prpos.state}
          />
          <Form.Item {...tailLayout}>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
}
